<template>
	<div class="wrapper addbox">
		<el-form label-position="right" class="demo-form-inline" :model="userDataForm" :rules="rules" ref="userDataForm" label-width="100px">
			<el-row>
				<el-col :span="24">
					<el-form-item label="标题:" prop="title">
						<el-input class="form-input"  v-model="userDataForm.title" placeholder="标题" size="small" @keyup.enter.native="matchCustomers" style="width:180px"></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			
			<el-row> 
				<el-form-item label="内容描述:" prop="content">
					<vue-editor v-model="userDataForm.content" ></vue-editor>
					
				</el-form-item>
			</el-row>

			<el-row class="action_row">
				<el-col :span="4">
					<el-button class="top_save" type="primary" @click="onSubmit" size="small"><i class="fa fa-save"></i> 保存</el-button>
				</el-col>
				<el-col :span="4">
					<el-button class="top_close" type="danger" @click="close" size="small"><i class="fa fa-sign-out"></i> 退出</el-button>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>

<script>
	let VueEditor
	if (process.browser) {
	  VueEditor = require('vue2-editor')
	}
	import Vue from 'vue'
	import axios from '~/plugins/axios';
	import { setToken, getCookie, validTel, checkQQ, checkeurl } from '../../utils/auth'
	import { mapGetters, mapActions, mapMutations } from 'vuex';
	import { Row, Col, Form, FormItem, Input, Select, Option, Radio, DatePicker, Cascader, Button, Table, TableColumn, Checkbox, Message, Pagination, Upload } from 'element-ui'
	
	Vue.use(Row);
	Vue.use(Upload);
	Vue.use(Col);
	Vue.use(Form);
	Vue.use(FormItem);
	Vue.use(Input);
	Vue.use(Select);
	Vue.use(Option);
	Vue.use(Radio);
	Vue.use(DatePicker);
	Vue.use(Cascader);
	Vue.use(Button);
	Vue.use(Table);
	Vue.use(TableColumn);
	Vue.use(Checkbox);
	Vue.use(Pagination);

	export default {
		components: {

		},
		head() {
			return { 
				title: "修改资讯",
			}
		},
		
		data() {
			return {
				rules: {
					id:"",
					 content:"",
					title: [{
						required: true,
						message: '请输入标题名称',
						trigger: 'blur'
					}],
					
					content: [{
						required: true,
						message: '请输入内容描述',
						trigger: 'blur'
					}],
				},
				onlyRead: true,
				userDataForm: {
					type:'',
					title:'',
					contractProperty:'',
					viewAddress:'',
					content:'',
					surfacePlot:''
				},
			};
		},
		methods: {
			
			onSubmit() {
				if(this.userDataForm.title.replace(/(^\s*)|(\s*$)/g, "").length==0) {
					Message.warning({
						message: '请输入标题名称'
					});
					return;
				}
				let op = this.userDataForm.content
				op = op.replace(/(\n)/g, "");
				op = op.replace(/(\t)/g, "");
				op = op.replace(/(\r)/g, "");
				op = op.replace(/<\/?[^>]*>/g, "");
				op = op.replace(/\s*/g, ""); 
				if(op.replace(/(^\s*)|(\s*$)/g, "").length==0) {
					Message.warning({
						message: '请输入内容描述'
					});
					return;
				}
				this.userDataForm.title = this.userDataForm.title;
				this.$store.dispatch('addHelp', this.userDataForm)
					.then((response) => {
						if(!response) {
							return
						}
						let result = response.data;
						if(result.successed && result.successed == true) {
							Message.success({
								message: '操作成功'
							});
							this.$router.replace('/b2cAdmin/helpList')
						} else {
							Message.warning({
								message: result.message
							});
						}
					})
					.catch((error) => {
						Message.error({
							message: result.message
						});
					});
			},
			//退出按钮 返回上一页
			close() {
				window.history.go(-1);
			},
			geturl() {
				let url = location.search;
				if(url.indexOf("?") != -1) {
					let str = url.substr(4);
					this.id = str;
				}
			},
			getCustomerDetail() {     
                  this.$store.dispatch('formmanDetail', {id: this.id})
                    .then((response) => {
                        if(!response){
                            return;
                        }
                        let result = response.data;

                        if (result.code === 0) {
                            //pageTab
                            if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                                let arr = this.pageTabsList;
                                arr[arr.length-1].name = result.data.title;
                                this.$store.commit('PAGETABSLIST',{data:arr})
                            }
                            this.userDataForm = result.data;

                        }
                    })
            },
			matchCustomers() {
				this.userDataForm.title = this.userDataForm.title;
				if(!this.userDataForm.title) {
					Message.warning({
						message: '请输入标题名称'
					});
					return;
				}
			},
		},
		computed: {
			...mapGetters({
				pageTabsList: 'getPageTabsList',
			}),

		},
		created() {
			
		},
		mounted() {
			this.geturl();
            this.getCustomerDetail();
			
		}
	}
</script>

<style scoped lang="scss">
	.action_row {
		width: 100%;
		float: left;
		margin-top: 40px;
		.top_close {
			float: left;
			margin-left: 40px;
		}
		.top_save {
			float: right;
			margin-right: 40px;
		}
	}
	
	.action_row_exit {
		text-align: center;
	}
	
	h4 {
		color: #008dd8;
	}
	
	.form-input {
		margin-right: 10%;
	}
	
	.seas {
		cursor: pointer;
		color: rgb(20, 136, 255);
	}
	
	.bg-login {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}
	
	.addbox {
		.el-table {
			.cell {
				padding-left: 0px !important;
			}
		}
		.avatar-uploader .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
			background-color: #ddd;
			vertical-align: middle;
			&:hover {
				border-color: #20a0ff;
			}
		}
		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 120px;
			height: 120px;
			line-height: 120px;
			text-align: center;
		}
		.avatar-wraper {
			display: inline-block;
			width: 120px;
			height: 120px;
			position: relative;
			border-radius: 6px;
			transition: all .3s ease-in;
			cursor: pointer;
			overflow: hidden;
			background-color: #ddd;
			vertical-align: middle;
			text-align: center;
			&:hover {
				background-color: #ccc;
			}
			.el-icon-plus {
				font-size: 28px;
				color: #8c939d;
				width: 120px;
				height: 120px;
				line-height: 120px;
				text-align: center;
			}
		}
		.avatar-contain {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
			background-color: white;
			line-height: 120px;
		}
		.avatar {
			display: inline-block;
			max-width: 100%;
			max-height: 100%;
			border: none;
			outline: none;
			vertical-align: middle;
		}
		.uploadUserAvatar {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 10;
			width: 120px;
			height: 120px;
			opacity: 0;
		}
		.upload-tips {
			display: inline-block;
			font-size: 12px;
			color: #999;
			margin-top: 106px;
		}
	}
</style>